<template>
	<view>
		<view class="plr20 box_b">
			<view class="conBox bgfff pb30 plr30 box_b mt20">
				<view class="space100 flex_between flex_items bbe9s">
					<view class="f30 c3 bold">报名时间：{{detail.addtime}}</view>
					<view v-if="detail.statusid == 0" class="f30 c9">待审核</view>
					<view v-if="detail.statusid == 1" class="f30 color1">通过审核</view>
					<view v-if="detail.statusid == 2" class="f30 color2">未通过审核</view>
					<view v-if="detail.statusid == 3" class="f30 c9">已参加活动</view>
				</view>
				<view class="flex_between flex_items f30 pt20 mt15">
					<view>姓名</view>
					<view>{{detail.name}}</view>
				</view>
				<view class="flex_between flex_items f30 pt20 mt15">
					<view>手机号</view>
					<view>{{detail.phone}}</view>
				</view>
				<view class="flex_between flex_items f30 pt20 mt15">
					<view>身份证号</view>
					<view>{{detail.id_card}}</view>
				</view>
				<view class="flex_between flex_items f30 pt20 mt15">
					<view>报名人数</view>
					<view>{{detail.peoples}}</view>
				</view>
				<view class="flex_between flex_items f30 pt20 mt15">
					<view>预约日期</view>
					<view>{{detail.appdate}}</view>
				</view>
				<view class="flex_between flex_items f30 pt20 mt15">
					<view>预约时间</view>
					<view>{{detail.apptime}}</view>
				</view>
				<view class="flex_between f30 pt20 mt15">
					<view class="flex_shrink pr30 box_b">备注</view>
					<view v-if="detail.remark"><text class="txt_word word_break">{{detail.remark}}</text></view>
					<view class="c9" v-else>无</view>
				</view>
				<view class="mt40">
					<view v-if="detail.statusid == 0" class="imgBox">
						<img class="img ops" :src="detail.qrcode" />
						<view class="f36 c9 bold txt_center">二维码不可用</view>
					</view>
					<view v-if="detail.statusid == 1" class="imgBox">
						<img class="img" :src="detail.qrcode" />
						<view class="f36 c9 bold txt_center">请将本二维码出示给核销员</view>
					</view>
					<view v-if="detail.statusid == 2" class="imgBox">
						<img class="img ops" :src="detail.qrcode" />
						<view class="f36 c9 bold txt_center">二维码不可用</view>
						<view class="f30 color2">原因：{{detail.reason}}</view>
					</view>
					<view v-if="detail.statusid == 3" class="imgBox">
						<img class="img ops" :src="detail.qrcode" />
						<view class="f36 c9 bold txt_center">二维码已使用</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let common = getApp().globalData.commonFun;
	let util = getApp().globalData.utilFun;
	export default {
		components: {},
		data() {
			return {
				imghttp: getApp().globalData.imghttp,
				detail: {},
				phone: "",
			}
		},
		async onLoad(option) {
			common.showLoading("加载中...");
			let phone = common.getStorage('phone');
			if (common.hasKey(option, 'phone')) {
				phone = option.phone;
			}
			if (phone && phone != undefined && typeof phone !== 'object' && !Array.isArray(phone)) {
				this.phone = phone;
			}
			this.getData()
		},
		methods: {
			async getData() {
				let val = {
					phone: this.phone
				}
				let url = 'arts/detail';
				let res = await util.httpRequest(url, val);
				common.hideLoading();
				if (res.result == "fail") {
					common.showTimeToast(res.msg);
					return;
				}
				this.detail = res.results
			}
		},
	}
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>
<style scoped>
	Page {
		background: #f8f8f8;
	}

	.color1 {
		color: #15a183;
	}

	.color2 {
		color: #ff4141;
	}

	.imgBox {
		width: 500rpx;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.img {
		width: 240rpx;
		height: 240rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}

	.ops {
		opacity: 0.5;
	}
</style>